<template>
  <div class="common-query">
    <el-select v-model="billStore.billQueryForm.billBook"
               @change="billStore.refreshInfo()" style="width: 120px">
      <el-option
          v-for="(item, index) in billQuery.billBookList"
          :key="index" :label="item.label" :value="item.name"
      />
    </el-select>

    <el-select v-model="billStore.billDateType"
               @change="billStore.refreshInfo()"
               style="width: 120px;align-self: center;">
      <el-option v-for="(item, index) in dateTypeOptions" :key="index"
                 :label="item.label" :value="item.value"/>
    </el-select>

    <el-switch
        v-model="billStore.billType"
        inline-prompt
        active-value="income" inactive-value="expensive"
        active-text="收入账单" inactive-text="支出账单"
        @change="billStore.refreshInfo()"
        style="--el-switch-on-color: #6FBB69; --el-switch-off-color: #CA6C65;"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useBillStore } from '@/store/bill.ts'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { IBillBook } from '@/types/bill.ts'

const billStore = useBillStore()

onMounted(async () => {
  await billStore.initBillInfo()

  billQuery.billBookList = deepCopyObject(billStore.billBookList)
  billQuery.billBookList.push({
    color: '',
    icon: '',
    id: 0,
    label: '全部账本',
    name: 'all'
  })
})

const dateTypeOptions = [{
  label: '按月选择',
  value: 'month'
},
{
  label: '按年选择',
  value: 'year'
}]

const billQuery = reactive({
  query: '',
  billBookList: [] as IBillBook[]
})
</script>
